<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>豆瓣</title>
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	<link rel="stylesheet" type="text/css" href="css/reset.css" />
	<link rel="stylesheet" type="text/css" href="css/common.css" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

</head>

<body>

	<!--头部开始-->
	<header class="header">
		<div class="container clearfix">
			<div class="logo left">
				<h1>
					<a href="">豆瓣</a>
				</h1>
			</div>
			<div class="search left">
				<form>
					<input type="text" class="txt" placeholder="书籍、电影、音乐、小组、小站、成员" />
					<button>
						<i class="iconfont iconsousuo1"></i>
					</button>
				</form>

			</div>
			<nav class="menu right clearfix">
				<a href="" class="men-read"></a>
				<a href="" class="men-movie"></a>
				<a href="" class="men-music"></a>
				<a href="" class="men-group"></a>
				<a href="" class="men-city"></a>
				<a href="" class="men-fm"></a>
				<a href="" class="men-time"></a>
				<a href="" class="men-doupin"></a>
			</nav>
		</div>
	</header>
	<!--头部结束-->

	<!--banner开始-->
	<div class="banner">
		<div class="container clearfix">
			<iframe class="right loginarea" src="./loginframe.html" frameborder="0"></iframe>
			<div class="slogan right">
				<h1 class="title">
					豆瓣
					<span>6.0</span>
				</h1>
				<div class="download">
					<button class="btn">下载豆瓣 APP</button>
					<span class="qrcode">
						<img src="img/icon_qrcode_green.png" alt="" />
						<!--<div class="qrcode-img hidden">
							<img src="img/qrcode.png"/>
							<p>iOS / Android 扫码直接下载</p>
						</div>-->
					</span>
				</div>
			</div>
		</div>
	</div>
	<!--banner结束-->
	<!-- 主区域内容 -->
	<div>
		<!--热点内容开始-->

		<div class="section">
			<div class="container  clearfix">

				<div class="aside-right">
					<div class="adv">
						<a href="">
							<img src="img/adv1.jpg" alt="">
						</a>
					</div>
					<div class="section-title">
						<h3 class="title">热门话题</h3>
						<span class="link">
							<a href="">去话题广场</a>
						</span>
					</div>
					<ul class="hot-list">
						<li>
							<div class="title">
								<a href="" class="adv-tag">记录家里的春意</a>
							</div>
							<div class="desc">
								<span>117 · 3万次浏览</span>
								<span></span>
							</div>
						</li>
						<li>
							<div class="title">
								<a href="" class="adv-tag">从爱情片中学到的爱情道理</a>
							</div>
							<div class="desc">
								<span>品牌话题

								</span>
								<span>· 6.3万次浏览</span>
							</div>
						</li>
						<li>
							<div class="title">
								<a href="" class="adv-tag">记录家里的春意</a>
							</div>
							<div class="desc">
								<span>117.3万次浏览</span>
								<span></span>
							</div>
						</li>
						<li>
							<div class="title">
								<a href="" class="adv-tag">记录家里的春意</a>
							</div>
							<div class="desc">
								<span>117.3万次浏览</span>
								<span></span>
							</div>
						</li>
						<li>
							<div class="title">
								<a href="" class="adv-tag">记录家里的春意</a>
							</div>
							<div class="desc">
								<span>117.3万次浏览</span>
								<span></span>
							</div>
						</li>
						<li>
							<div class="title">
								<a href="" class="adv-tag">记录家里的春意</a>
							</div>
							<div class="desc">
								<span>117·3万次浏览</span>
								<span></span>
							</div>
						</li>
					</ul>
				</div>
				<div class="main">
					<div class="section-title">
						<h3 class="title">热门内容</h3>
						<span class="link">
							<a href="">更多</a>
						</span>
					</div>
					<div class="hot-main clearfix">
						<div class="left">
							<ul>
								<li>
									<div class="img">
										<a href=""><img src="img/cover1.webp" alt=""></a>
									</div>
									<div class="words">
										<a href="">折紙系列-氣球皮卡丘 </a>
										<span>15张照片</span>
									</div>
								</li>
								<li>
									<div class="img">
										<a href=""><img src="img/cover1.webp" alt=""></a>
									</div>
									<div class="words">
										<a href="">折紙系列-氣球皮卡丘 </a>
										<span>15张照片</span>
									</div>
								</li>
								<li>
									<div class="img">
										<a href=""><img src="img/cover1.webp" alt=""></a>
									</div>
									<div class="words">
										<a href="">折紙系列-氣球皮卡丘 </a>
										<span>15张照片</span>
									</div>
								</li>
								<li>
									<div class="img">
										<a href=""><img src="img/cover1.webp" alt=""></a>
									</div>
									<div class="words">
										<a href="">折紙系列-氣球皮卡丘 </a>
										<span>15张照片</span>
									</div>
								</li>
							</ul>
						</div>
						<div class="right">
							<ul class="item-list">
								<li>
									<a href="">花盆土壤中的夜间动物园</a>
									<div class="title">
										小句芒的日记
									</div>
									<div class="desc">
										我家位于某个城中村里面，这里看不到山川河流，只有密密麻麻的房子，和川流不息的...
									</div>
								</li>
								<li><a href="">花盆土壤中的夜间动物园</a></li>
								<li><a href="">花盆土壤中的夜间动物园</a></li>
								<li><a href="">花盆土壤中的夜间动物园</a></li>
								<li><a href="">花盆土壤中的夜间动物园</a></li>
								<li><a href="">花盆土壤中的夜间动物园</a></li>
								<li><a href="">花盆土壤中的夜间动物园</a></li>
								<li><a href="">花盆土壤中的夜间动物园</a></li>
								<li><a href="">花盆土壤中的夜间动物园</a></li>
								<li><a href="">花盆土壤中的夜间动物园</a></li>
								<li><a href="">花盆土壤中的夜间动物园</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!--热点内容结束-->

	<!-- 豆瓣时间 -->
	<div class="section">
		<div class="container  clearfix">

			<div class="aside-left">
				<h2 class="title">
					<a class="dark-color" href="">豆瓣时间</a>
				</h2>
			</div>
			<div class="main">
				<div class="section-title">
					<h3 class="title">热门专栏 </h3>
					<span class="link">
						<a href="">更多</a>
					</span>
				</div>
				<div class="time-main">
					<ul class="item-list">
						<li>
							<div class="img">
								<a href="">
									<img src="img/cover2.jpg" alt="">
								</a>
							</div>
							<div class="words">
								<a href="">
									罪恶的背后——人人必修的60堂犯罪心理学
								</a>
								<span>音频专栏</span>
							</div>
						</li>
						<li>
							<div class="img">
								<a href="">
									<img src="img/cover2.jpg" alt="">
								</a>
							</div>
							<div class="words">
								<a href="">
									罪恶的背后——人人必修的60堂犯罪心理学
								</a>
								<span>音频专栏</span>
							</div>
						</li>
						<li>
							<div class="img">
								<a href="">
									<img src="img/cover2.jpg" alt="">
								</a>
							</div>
							<div class="words">
								<a href="">
									罪恶的背后——人人必修的60堂犯罪心理学
								</a>
								<span>音频专栏</span>
							</div>
						</li>
						<li>
							<div class="img">
								<a href="">
									<img src="img/cover2.jpg" alt="">
								</a>
							</div>
							<div class="words">
								<a href="">
									罪恶的背后——人人必修的60堂犯罪心理学
								</a>
								<span>音频专栏</span>
							</div>
						</li>
						<li>
							<div class="img">
								<a href="">
									<img src="img/cover2.jpg" alt="">
								</a>
							</div>
							<div class="words">
								<a href="">
									罪恶的背后——人人必修的60堂犯罪心理学
								</a>
								<span>音频专栏</span>
							</div>
						</li>
						<li>
							<div class="img">
								<a href="">
									<img src="img/cover2.jpg" alt="">
								</a>
							</div>
							<div class="words">
								<a href="">
									罪恶的背后——人人必修的60堂犯罪心理学
								</a>
								<span>音频专栏</span>
							</div>
						</li>
						<li>
							<div class="img">
								<a href="">
									<img src="img/cover2.jpg" alt="">
								</a>
							</div>
							<div class="words">
								<a href="">
									罪恶的背后——人人必修的60堂犯罪心理学
								</a>
								<span>音频专栏</span>
							</div>
						</li>
						<li>
							<div class="img">
								<a href="">
									<img src="img/cover2.jpg" alt="">
								</a>
							</div>
							<div class="words">
								<a href="">
									罪恶的背后——人人必修的60堂犯罪心理学
								</a>
								<span>音频专栏</span>
							</div>
						</li>
						<li>
							<div class="img">
								<a href="">
									<img src="img/cover2.jpg" alt="">
								</a>
							</div>
							<div class="words">
								<a href="">
									罪恶的背后——人人必修的60堂犯罪心理学
								</a>
								<span>音频专栏</span>
							</div>
						</li>
						<li>
							<div class="img">
								<a href="">
									<img src="img/cover2.jpg" alt="">
								</a>
							</div>
							<div class="words">
								<a href="">
									罪恶的背后——人人必修的60堂犯罪心理学
								</a>
								<span>音频专栏</span>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<!-- 豆瓣时间结束 -->

	<!-- 视频 -->
	<div class="section">
		<div class="container clearfix">
			<div class="aside-left">
				<div class="title">
					<h2>
						<a href="" class="dark-color">视频</a>
					</h2>
				</div>
			</div>
			<div class="main video-main">
				<div class="section-title">
					<a href="">
						<h2 class="title">瓣嘴 </h2>
					</a>
				</div>
				<ul class="item-list ">
					<li>
						<a href=""></a>
						<div class="img iconfont iconbofang">
							<img src="img/cover1.webp" alt="">
						</div>
						</a>
						<div class="words">
							<a href="">那人那事</a>
						</div>
					</li>
					<li>
						<a href=""></a>
						<div class="img iconfont iconbofang">
							<img src="img/cover1.webp" alt="">
						</div>
						</a>
						<div class="words">
							<a href="">那人那事</a>
						</div>
					</li>
					<li>
						<a href=""></a>
						<div class="img iconfont iconbofang">
							<img src="img/cover1.webp" alt="">
						</div>
						</a>
						<div class="words">
							<a href="">那人那事</a>
						</div>
					</li>
				</ul>

				<div class="section-title">
					<a href="">
						<h2 class="title">观影会客厅</h2>
					</a>
				</div>
				<ul class="item-list">
					<li>
						<a href=""></a>
						<div class="img iconfont iconbofang">
							<img src="img/cover1.webp" alt="">
						</div>
						</a>
						<div class="words">
							<a href="">那人那事</a>
						</div>
					</li>
					<li>
						<a href=""></a>
						<div class="img iconfont iconbofang">
							<img src="img/cover1.webp" alt="">
						</div>
						</a>
						<div class="words">
							<a href="">那人那事</a>
						</div>
					</li>
					<li>
						<a href=""></a>
						<div class="img iconfont iconbofang">
							<img src="img/cover1.webp" alt="">
						</div>
						</a>
						<div class="words">
							<a href="">那人那事</a>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>

	<!-- 视频结束 -->

	<!-- 电影 -->
	<div class="section">
		<div class="container  clearfix">

			<div class="aside-left">
				<h2 class="title">
					<a href="">电影</a>
				</h2>
				<nav class="left-menu">
					<ul>
						<li><a href="">影讯&购票</a></li>
						<li><a href="" class="new">选电影 </a></li>
						<li><a href="">电视剧</a></li>
						<li><a href="">排行榜</a></li>
						<li><a href="">分类</a></li>
						<li><a href="">影评</a></li>
						<li><a href="">预告片</a></li>
						<li><a href="">问答</a></li>
					</ul>
				</nav>
			</div>

			<div class="aside-right movie-area">
				<div class="section-title">
					<h3 class="title">影片分类</h3>
					<span class="link">
						<a href="">更多</a>
					</span>
				</div>
				<div class="right-menu-list clearfix">
					<ul>
						<li><a href="">爱情</a></li>
						<li><a href="">剧情</a></li>
						<li><a href="">喜剧</a></li>
						<li><a href="">动画</a></li>
						<li><a href="">科幻</a></li>
						<li><a href="">经典</a></li>
						<li><a href="">动作</a></li>
						<li><a href="">悬疑</a></li>
						<li><a href="">犯罪</a></li>
						<li><a href="">青春</a></li>
						<li><a href="">搞笑</a></li>
						<li><a href="">文艺</a></li>
						<li><a href="">惊悚</a></li>
						<li><a href="">励志</a></li>
						<li><a href="">纪录片</a></li>
						<li><a href="">黑色幽默</a></li>
						<li><a href="">战争</a></li>
						<li><a href="">战争</a></li>
						<li><a href="">恐怖</a></li>
						<li><a href="">美国</a></li>
						<li><a href="">日本</a></li>
						<li><a href="">香港 </a></li>
						<li><a href="">韩国 </a></li>
						<li><a href="">中国</a> </li>
						<li><a href="">中国大陆</a> </li>
						<li><a href="">英国</a> </li>
						<li><a href="">法国 </a></li>
						<li><a href="">台湾</a></li>
						<li><a href=""> 印度</a></li>
					</ul>
				</div>
				<div class="section-title">
					<h3 class="title">近期热门 </h3>
					<span class="link">
						<a href="">更多</a>
					</span>
				</div>
				<ul class="order-movie-list">
					<li>
						<a href="">小妇人</a>
					</li>
					<li>
						<a href="">小妇人</a>
					</li>
					<li>
						<a href="">小妇人</a>
					</li>
					<li>
						<a href="">小妇人</a>
					</li>
					<li>
						<a href="">小妇人</a>
					</li>
					<li>
						<a href="">小妇人</a>
					</li>
					<li>
						<a href="">小妇人</a>
					</li>
					<li>
						<a href="">小妇人</a>
					</li>
					<li>
						<a href="">小妇人</a>
					</li>
					<li>
						<a href="">小妇人</a>
					</li>

				</ul>
			</div>
			<div class="main">
				<div class="section-title">
					<h3 class="title">正在热映
					</h3>
					<span class="link">
						<a href="">更多</a>
					</span>
				</div>
				<div class="movie-area">
					<ul class="item-list">
						<li>
							<div class="img">
								<a href="">
									<img src="img/cover3.webp" alt="">
								</a>
							</div>
							<div class="words">
								<a href="">那人那事那人那事那人那事</a>
							</div>
							<div class="start">
								<span class="start-bg start50"></span>
								<span class="number">8.9</span>
							</div>
							<div class="func">
								<a href="" class="block-link">选座购票</a>
							</div>
						</li>
						<li>
							<div class="img">
								<a href="">
									<img src="img/cover3.webp" alt="">
								</a>
							</div>
							<div class="words">
								<a href="">那人那事那人那事那人那事</a>
							</div>
							<div class="start">
								<span class="start-bg start50"></span>
								<span class="number">8.9</span>
							</div>
							<div class="func">
								<a href="" class="block-link">选座购票</a>
							</div>
						</li>
						<li>
							<div class="img">
								<a href="">
									<img src="img/cover3.webp" alt="">
								</a>
							</div>
							<div class="words">
								<a href="">那人那事那人那事那人那事</a>
							</div>
							<div class="start">
								<span class="start-bg start50"></span>
								<span class="number">8.9</span>
							</div>
							<div class="func">
								<a href="" class="block-link">选座购票</a>
							</div>
						</li>
						<li>
							<div class="img">
								<a href="">
									<img src="img/cover3.webp" alt="">
								</a>
							</div>
							<div class="words">
								<a href="">那人那事那人那事那人那事</a>
							</div>
							<div class="start">
								<span class="start-bg start50"></span>
								<span class="number">8.9</span>
							</div>
							<div class="func">
								<a href="" class="block-link">选座购票</a>
							</div>
						</li>
						<li>
							<div class="img">
								<a href="">
									<img src="img/cover3.webp" alt="">
								</a>
							</div>
							<div class="words">
								<a href="">那人那事那人那事那人那事</a>
							</div>
							<div class="start">
								<span class="start-bg start50"></span>
								<span class="number">8.9</span>
							</div>
							<div class="func">
								<a href="" class="block-link">选座购票</a>
							</div>
						</li>
						<li>
							<div class="img">
								<a href="">
									<img src="img/cover3.webp" alt="">
								</a>
							</div>
							<div class="words">
								<a href="">那人那事那人那事那人那事</a>
							</div>
							<div class="start">
								<span class="start-bg start50"></span>
								<span class="number">8.9</span>
							</div>
							<div class="func">
								<a href="" class="block-link">选座购票</a>
							</div>
						</li>
						<li>
							<div class="img">
								<a href="">
									<img src="img/cover3.webp" alt="">
								</a>
							</div>
							<div class="words">
								<a href="">那人那事那人那事那人那事</a>
							</div>
							<div class="start">
								<span class="start-bg start50"></span>
								<span class="number">8.9</span>
							</div>
							<div class="func">
								<a href="" class="block-link">选座购票</a>
							</div>
						</li>
						<li>
							<div class="img">
								<a href="">
									<img src="img/cover3.webp" alt="">
								</a>
							</div>
							<div class="words">
								<a href="">那人那事那人那事那人那事</a>
							</div>
							<div class="start">
								<span class="start-bg start50"></span>
								<span class="number">8.9</span>
							</div>
							<div class="func">
								<a href="" class="block-link">选座购票</a>
							</div>
						</li>
					</ul>
				</div>

				<!--电影结束 -->
			</div>
		</div>
	</div>
	<!-- 电影结束-->

	<!-- 小组开始 -->

	<div class="section">
		<div class="container group-area  clearfix">

			<div class="aside-left">
				<h2 class="title">
					<a href="">小组</a>
				</h2>
				<nav class="left-menu">
					<ul>
						<li><a href="">精选</a></li>
						<li><a href="">文化 </a></li>
						<li><a href="">行摄</a></li>
						<li><a href="">娱乐</a></li>
						<li><a href="">时尚</a></li>
						<li><a href="">生活</a></li>
						<li><a href="">科技</a></li>

					</ul>
				</nav>
			</div>

			<div class="aside-right movie-area">
				<div class="section-title">
					<h3 class="title">小组分类</h3>
				</div>
				<div class="group">
					<div class="group-name">
						<a href="">兴趣</a>
					</div>
					<div class="right-menu-list clearfix">
						<ul>
							<li><a href="">旅行</a></li>
							<li><a href="">摄影</a></li>
							<li><a href="">喜剧</a></li>
							<li><a href="">动画</a></li>
							<li><a href="">科幻</a></li>
							<li><a href="">经典</a></li>
							<li><a href="">动作</a></li>
							<li><a href="">悬疑</a></li>
							<li><a href="">犯罪</a></li>
							<li><a href="">青春</a></li>
							<li><a href="">搞笑</a></li>

						</ul>
					</div>
				</div>
				<div class="group">
					<div class="group-name">
						<a href="">生活</a>
					</div>
					<div class="right-menu-list clearfix">
						<ul>
							<li><a href="">旅行</a></li>
							<li><a href="">摄影</a></li>
							<li><a href="">喜剧</a></li>
							<li><a href="">动画</a></li>
							<li><a href="">科幻</a></li>
							<li><a href="">经典</a></li>
							<li><a href="">动作</a></li>
							<li><a href="">悬疑</a></li>
							<li><a href="">犯罪</a></li>
							<li><a href="">青春</a></li>
							<li><a href="">搞笑</a></li>

						</ul>
					</div>
				</div>
				<div class="group">
					<div class="group-name">
						<a href="">购物</a>
					</div>
					<div class="right-menu-list clearfix">
						<ul>
							<li><a href="">旅行</a></li>
							<li><a href="">摄影</a></li>
							<li><a href="">喜剧</a></li>
							<li><a href="">动画</a></li>
							<li><a href="">科幻</a></li>
							<li><a href="">经典</a></li>


						</ul>
					</div>
				</div>
				<div class="group">
					<div class="group-name">
						<a href="">社会</a>
					</div>
					<div class="right-menu-list clearfix">
						<ul>
							<li><a href="">旅行</a></li>
							<li><a href="">摄影</a></li>
							<li><a href="">喜剧</a></li>
							<li><a href="">动画</a></li>
							<li><a href="">科幻</a></li>
							<li><a href="">经典</a></li>
							<li><a href="">动作</a></li>
							<li><a href="">悬疑</a></li>
							<li><a href="">犯罪</a></li>


						</ul>
					</div>
				</div>
				<div class="group">
					<div class="group-name">
						<a href="">艺术</a>
					</div>
					<div class="right-menu-list clearfix">
						<ul>
							<li><a href="">旅行</a></li>
							<li><a href="">摄影</a></li>
							<li><a href="">喜剧</a></li>
							<li><a href="">动画</a></li>
							<li><a href="">科幻</a></li>
							<li><a href="">经典</a></li>


						</ul>
					</div>
				</div>
				<div class="group">
					<div class="group-name">
						<a href="">学术</a>
					</div>
					<div class="right-menu-list clearfix">
						<ul>
							<li><a href="">旅行</a></li>
							<li><a href="">摄影</a></li>
							<li><a href="">喜剧</a></li>
							<li><a href="">动画</a></li>
							<li><a href="">科幻</a></li>
							<li><a href="">经典</a></li>
							<li><a href="">动作</a></li>
							<li><a href="">悬疑</a></li>
							<li><a href="">犯罪</a></li>
							<li><a href="">青春</a></li>
							<li><a href="">搞笑</a></li>

						</ul>
					</div>
				</div>
				<div class="group">
					<div class="group-name">
						<a href="">情感</a>
					</div>
					<div class="right-menu-list clearfix">
						<ul>
							<li><a href="">旅行</a></li>
							<li><a href="">摄影</a></li>
							<li><a href="">喜剧</a></li>
							<li><a href="">动画</a></li>
							<li><a href="">科幻</a></li>
							<li><a href="">经典</a></li>
							<li><a href="">动作</a></li>


						</ul>
					</div>
				</div>
				<div class="group">
					<div class="group-name">
						<a href="">闲聊</a>
					</div>
					<div class="right-menu-list clearfix">
						<ul>
							<li><a href="">旅行</a></li>
							<li><a href="">摄影</a></li>
							<li><a href="">喜剧</a></li>
							<li><a href="">动画</a></li>
							<li><a href="">科幻</a></li>



						</ul>
					</div>
				</div>
			</div>
			<div class="main">
				<div class="section-title">
					<h3 class="title">热门小组</h3>
					<span class="link">
						<a href="">更多</a>
					</span>
				</div>
				<ul class="item-list">
					<li>
						<div class="img">
							<a href="">
								<img src="img/cover4.webp" alt="">
							</a>
						</div>
						<div class="words">
							<a href="">沙发客</a>
							<span>23538 个成员</span>
						</div>
					</li>
					<li>
						<div class="img">
							<a href="">
								<img src="img/cover4.webp" alt="">
							</a>
						</div>
						<div class="words">
							<a href="">沙发客</a>
							<span>23538 个成员</span>
						</div>
					</li>
					<li>
						<div class="img">
							<a href="">
								<img src="img/cover4.webp" alt="">
							</a>
						</div>
						<div class="words">
							<a href="">沙发客</a>
							<span>23538 个成员</span>
						</div>
					</li>
					<li>
						<div class="img">
							<a href="">
								<img src="img/cover4.webp" alt="">
							</a>
						</div>
						<div class="words">
							<a href="">沙发客</a>
							<span>23538 个成员</span>
						</div>
					</li>
					<li>
						<div class="img">
							<a href="">
								<img src="img/cover4.webp" alt="">
							</a>
						</div>
						<div class="words">
							<a href="">沙发客</a>
							<span>23538 个成员</span>
						</div>
					</li>
					<li>
						<div class="img">
							<a href="">
								<img src="img/cover4.webp" alt="">
							</a>
						</div>
						<div class="words">
							<a href="">沙发客</a>
							<span>23538 个成员</span>
						</div>
					</li>
					<li>
						<div class="img">
							<a href="">
								<img src="img/cover4.webp" alt="">
							</a>
						</div>
						<div class="words">
							<a href="">沙发客</a>
							<span>23538 个成员</span>
						</div>
					</li>
					<li>
						<div class="img">
							<a href="">
								<img src="img/cover4.webp" alt="">
							</a>
						</div>
						<div class="words">
							<a href="">沙发客</a>
							<span>23538 个成员</span>
						</div>
					</li>
					<li>
						<div class="img">
							<a href="">
								<img src="img/cover4.webp" alt="">
							</a>
						</div>
						<div class="words">
							<a href="">沙发客</a>
							<span>23538 个成员</span>
						</div>
					</li>
				</ul>
			</div>

		</div>
	</div>
	<!-- 小组结束 -->

	<!-- 读书开始 -->
	<div class="section">
		<div class="container book-area  clearfix">

			<div class="aside-left">
				<h2 class="title">
					<a href="">读书</a>
				</h2>
				<nav class="left-menu">
					<ul>
						<li><a href="">分类浏览</a></li>
						<li><a href="" class="new ">阅读</a></li>
						<li><a href="">作者</a></li>
						<li><a href="">书评</a></li>
						<li><a href="">购书单</a></li>

					</ul>
				</nav>
				<div class="menu-adv">
					<a href="">
						<span class="app-icon-1"></span>
					</a>
					<a href="">豆瓣阅读</a>
				</div>
			</div>

			<div class="aside-right movie-area">
				<div class="section-title">
					<h3 class="title">热门标签</h3>
					<span class="link">
						<a href="">更多</a>
					</span>
				</div>

				<div class="group">
					<ul class="right-menu-list clearfix">
						<li><span>[文学]</span></li>
						<li><a href="">小说</a></li>
						<li><a href="">随笔</a></li>
						<li><a href="">日本文学 </a></li>
						<li><a href="">散文</a></li>
						<li><a href="">诗歌</a></li>
						<li><a href="">童话</a></li>
						<li><a href="">名著</a></li>
						<li><a href="">港台</a></li>
						<li><a href="">更多</a></li>
					</ul>
				</div>
				<div class="group">
					<ul class="right-menu-list clearfix">
						<li><span>[文学]</span></li>
						<li><a href="">小说</a></li>
						<li><a href="">随笔</a></li>
						<li><a href="">日本文学 </a></li>
						<li><a href="">散文</a></li>
						<li><a href="">诗歌</a></li>
						<li><a href="">童话</a></li>
						<li><a href="">名著</a></li>
						<li><a href="">港台</a></li>
						<li><a href="">更多</a></li>
					</ul>
				</div>
				<div class="group">
					<ul class="right-menu-list clearfix">
						<li><span>[文学]</span></li>
						<li><a href="">小说</a></li>
						<li><a href="">随笔</a></li>
						<li><a href="">日本文学 </a></li>
						<li><a href="">散文</a></li>
						<li><a href="">诗歌</a></li>
						<li><a href="">童话</a></li>
						<li><a href="">名著</a></li>
						<li><a href="">港台</a></li>
						<li><a href="">更多</a></li>
					</ul>
				</div>
				<div class="group">
					<ul class="right-menu-list clearfix">
						<li><span>[文学]</span></li>
						<li><a href="">小说</a></li>
						<li><a href="">随笔</a></li>
						<li><a href="">日本文学 </a></li>
						<li><a href="">散文</a></li>
						<li><a href="">诗歌</a></li>
						<li><a href="">童话</a></li>
						<li><a href="">名著</a></li>
						<li><a href="">港台</a></li>
						<li><a href="">更多</a></li>
					</ul>
				</div>
				<div class="group">
					<ul class="right-menu-list clearfix">
						<li><span>[文学]</span></li>
						<li><a href="">小说</a></li>
						<li><a href="">随笔</a></li>
						<li><a href="">日本文学 </a></li>
						<li><a href="">散文</a></li>
						<li><a href="">诗歌</a></li>
						<li><a href="">童话</a></li>
						<li><a href="">名著</a></li>
						<li><a href="">港台</a></li>
						<li><a href="">更多</a></li>
					</ul>
				</div>
				<div class="group">
					<ul class="right-menu-list clearfix">
						<li><span>[文学]</span></li>
						<li><a href="">小说</a></li>
						<li><a href="">随笔</a></li>
						<li><a href="">日本文学 </a></li>
						<li><a href="">散文</a></li>
						<li><a href="">诗歌</a></li>
						<li><a href="">童话</a></li>
						<li><a href="">名著</a></li>
						<li><a href="">港台</a></li>
						<li><a href="">更多</a></li>
					</ul>
				</div>



			</div>
			<div class="main">
				<div class="section-title">
					<h3 class="title">新书速递
					</h3>
					<span class="link">
						<a href="">更多</a>
					</span>
				</div>

				<ul class="item-list">
					<li>
						<div class="img">
							<a href="">
								<img src="img/cover3.webp" alt="">
							</a>
						</div>
						<div class="words">
							<a href="">那人那事那人那事那人那事</a>
							<span>格非</span>
						</div>

						<div class="func">
							<a href="" class="block-link">免费试读</a>
						</div>
					</li>
					<li>
						<div class="img">
							<a href="">
								<img src="img/cover3.webp" alt="">
							</a>
						</div>
						<div class="words">
							<a href="">那人那事那人那事那人那事</a>
							<span>格非</span>
						</div>

						<div class="func">
							<a href="" class="block-link">免费试读</a>
						</div>
					</li>
					<li>
						<div class="img">
							<a href="">
								<img src="img/cover3.webp" alt="">
							</a>
						</div>
						<div class="words">
							<a href="">那人那事那人那事那人那事</a>
							<span>格非</span>
						</div>

						<div class="func">
							<a href="" class="block-link">免费试读</a>
						</div>
					</li>
					<li>
						<div class="img">
							<a href="">
								<img src="img/cover3.webp" alt="">
							</a>
						</div>
						<div class="words">
							<a href="">那人那事那人那事那人那事</a>
							<span>格非</span>
						</div>

						<div class="func">
							<a href="" class="block-link">免费试读</a>
						</div>
					</li>

				</ul>

				<div class="section-title">
					<h3 class="title">原创数字作品</h3>
					<span class="link">
						<a href="">更多</a>
					</span>
				</div>

				<ul class="item-list">
					<li>
						<div class="img">
							<a href="">
								<img src="img/cover3.webp" alt="">
							</a>
						</div>
						<div class="words">
							<a href="">那人那事那人那事那人那事</a>
							<span>格非</span>
						</div>

						<div class="func">
							<a href="" class="block-link">免费试读</a>
						</div>
					</li>
					<li>
						<div class="img">
							<a href="">
								<img src="img/cover3.webp" alt="">
							</a>
						</div>
						<div class="words">
							<a href="">那人那事那人那事那人那事</a>
							<span>格非</span>
						</div>

						<div class="func">
							<a href="" class="block-link">免费试读</a>
						</div>
					</li>
					<li>
						<div class="img">
							<a href="">
								<img src="img/cover3.webp" alt="">
							</a>
						</div>
						<div class="words">
							<a href="">那人那事那人那事那人那事</a>
							<span>格非</span>
						</div>

						<div class="func">
							<a href="" class="block-link">免费试读</a>
						</div>
					</li>
					<li>
						<div class="img">
							<a href="">
								<img src="img/cover3.webp" alt="">
							</a>
						</div>
						<div class="words">
							<a href="">那人那事那人那事那人那事</a>
							<span>格非</span>
						</div>

						<div class="func">
							<a href="" class="block-link">免费试读</a>
						</div>
					</li>

				</ul>


				<!--电影结束 -->
			</div>
		</div>
	</div>
	<!-- 读书结束 -->

	<!-- 音乐开始 -->
	<div class="section">
		<div class="container music-area  clearfix">
			<div class="aside-left">
				<h2 class="title">
					<a href="">音乐</a>
				</h2>
				<nav class="left-menu">
					<ul>
						<li><a href="">音乐人</a></li>
						<li><a href="">潮潮豆瓣音乐周</a></li>
						<li><a href="">金羊毛计划</a></li>
						<li><a href="">专题</a></li>
						<li><a href="">排行榜</a></li>
						<li><a href="">分类浏览</a></li>
						<li><a href="">乐评</a></li>
						<li><a href="">豆瓣FM</a></li>
						<li><a href="">歌单</a></li>
						<li><a href="">阿比鹿音乐奖</a></li>

					</ul>
				</nav>
				<div class="menu-adv">
					<a href="">
						<span class="app-icon-2"></span>
					</a>
					<a href="">豆瓣FM</a>
				</div>
				<div class="menu-adv">
					<a href="">
						<span class="app-icon-3"></span>
					</a>
					<a href="">豆瓣音乐人</a>
				</div>
			</div>
			<div class="aside-right">
				<div class="section-title">
					<h3 class="title">热门歌单</h3>
					<span class="link">
						<a href="">更多</a>
					</span>
				</div>

				<ul class="music-player-list ">
					<li class="clearfix">
						<span class="number left">1.</span>
						<div class="player right">
							<a href="">
								<div class="img left iconfont iconbofang1">

									<img src="img/cover5.jpg" alt="">

								</div>
							</a>
							<div class="words left">
								<a href="">尹力</a>
								<span>流派: 电子 Electronica</span>
								<span>64人关注</span>
							</div>
						</div>
					</li>
					<li class="clearfix">
						<span class="number left">1.</span>
						<div class="player right">
							<a href="">
								<div class="img left iconfont iconbofang1">

									<img src="img/cover5.jpg" alt="">

								</div>
							</a>
							<div class="words left">
								<a href="">尹力</a>
								<span>流派: 电子 Electronica</span>
								<span>64人关注</span>
							</div>
						</div>
					</li>
					<li class="clearfix">
						<span class="number left">1.</span>
						<div class="player right">
							<a href="">
								<div class="img left iconfont iconbofang1">

									<img src="img/cover5.jpg" alt="">

								</div>
							</a>
							<div class="words left">
								<a href="">尹力</a>
								<span>流派: 电子 Electronica</span>
								<span>64人关注</span>
							</div>
						</div>
					</li>
					<li class="clearfix">
						<span class="number left">1.</span>
						<div class="player right">
							<a href="">
								<div class="img left iconfont iconbofang1">

									<img src="img/cover5.jpg" alt="">

								</div>
							</a>
							<div class="words left">
								<a href="">尹力</a>
								<span>流派: 电子 Electronica</span>
								<span>64人关注</span>
							</div>
						</div>
					</li>
					<li class="clearfix">
						<span class="number left">1.</span>
						<div class="player right">
							<a href="">
								<div class="img left iconfont iconbofang1">

									<img src="img/cover5.jpg" alt="">

								</div>
							</a>
							<div class="words left">
								<a href="">尹力</a>
								<span>流派: 电子 Electronica</span>
								<span>64人关注</span>
							</div>
						</div>
					</li>


				</ul>

			</div>
			<div class="main">
				<div class="section-title">
					<h3 class="title">豆瓣新碟榜</h3>
					<span class="link">
						<a href="">更多</a>
					</span>
				</div>
				<ul class="item-list">
					<li>
						<div class="img">
							<a href=""><img src="img/cover4.webp" alt=""></a>
						</div>
						<div class="words">
							<a href="">爱到惊心动魄后</a>

						</div>
						<div class="words">

							<a href="">杨千嬅</a>
						</div>
						<div class="start">
							<span class="start-bg start50"></span>
							<span class="number">8.9</span>
						</div>
					</li>
					<li>
						<div class="img">
							<a href=""><img src="img/cover4.webp" alt=""></a>
						</div>
						<div class="words">
							<a href="">爱到惊心动魄后</a>

						</div>
						<div class="words">

							<a href="">杨千嬅</a>
						</div>
						<div class="start">
							<span class="start-bg start50"></span>
							<span class="number">8.9</span>
						</div>
					</li>
					<li>
						<div class="img">
							<a href=""><img src="img/cover4.webp" alt=""></a>
						</div>
						<div class="words">
							<a href="">爱到惊心动魄后</a>

						</div>
						<div class="words">

							<a href="">杨千嬅</a>
						</div>
						<div class="start">
							<span class="start-bg start50"></span>
							<span class="number">8.9</span>
						</div>
					</li>
					<li>
						<div class="img">
							<a href=""><img src="img/cover4.webp" alt=""></a>
						</div>
						<div class="words">
							<a href="">爱到惊心动魄后</a>

						</div>
						<div class="words">

							<a href="">杨千嬅</a>
						</div>
						<div class="start">
							<span class="start-bg start50"></span>
							<span class="number">8.9</span>
						</div>
					</li>
					<li>
						<div class="img">
							<a href=""><img src="img/cover4.webp" alt=""></a>
						</div>
						<div class="words">
							<a href="">爱到惊心动魄后</a>

						</div>
						<div class="words">

							<a href="">杨千嬅</a>
						</div>
						<div class="start">
							<span class="start-bg start50"></span>
							<span class="number">8.9</span>
						</div>
					</li>
					<li>
						<div class="img">
							<a href=""><img src="img/cover4.webp" alt=""></a>
						</div>
						<div class="words">
							<a href="">爱到惊心动魄后</a>

						</div>
						<div class="words">

							<a href="">杨千嬅</a>
						</div>
						<div class="start">
							<span class="start-bg start50"></span>
							<span class="number">8.9</span>
						</div>
					</li>
					<li>
						<div class="img">
							<a href=""><img src="img/cover4.webp" alt=""></a>
						</div>
						<div class="words">
							<a href="">爱到惊心动魄后</a>

						</div>
						<div class="words">

							<a href="">杨千嬅</a>
						</div>
						<div class="start">
							<span class="start-bg start50"></span>
							<span class="number">8.9</span>
						</div>
					</li>
					<li>
						<div class="img">
							<a href=""><img src="img/cover4.webp" alt=""></a>
						</div>
						<div class="words">
							<a href="">爱到惊心动魄后</a>

						</div>
						<div class="words">

							<a href="">杨千嬅</a>
						</div>
						<div class="start">
							<span class="start-bg start50"></span>
							<span class="number">8.9</span>
						</div>
					</li>
				</ul>
				<div class="section-title">
					<h3 class="title">热门歌单</h3>
					<span class="link">
						<a href="">更多</a>
					</span>
				</div>
				<ul class="item-list hot-music">
					<li>
						<a href="">
							<div class="img iconfont iconbofang">
								<img src="img/cover4.webp" alt="">
							</div>
						</a>
						<div class="words">
							爱到惊心动魄后

						</div>

					</li>
					<li>
						<a href="">
							<div class="img iconfont iconbofang">
								<img src="img/cover4.webp" alt="">
							</div>
						</a>
						<div class="words">
							爱到惊心动魄后

						</div>

					</li>
					<li>
						<a href="">
							<div class="img iconfont iconbofang">
								<img src="img/cover4.webp" alt="">
							</div>
						</a>
						<div class="words">
							爱到惊心动魄后

						</div>

					</li>
					<li>
						<a href="">
							<div class="img iconfont iconbofang">
								<img src="img/cover4.webp" alt="">
							</div>
						</a>
						<div class="words">
							爱到惊心动魄后

						</div>

					</li>
					<li>
						<a href="">
							<div class="img iconfont iconbofang">
								<img src="img/cover4.webp" alt="">
							</div>
						</a>
						<div class="words">
							爱到惊心动魄后

						</div>

					</li>
					<li>
						<a href="">
							<div class="img iconfont iconbofang">
								<img src="img/cover4.webp" alt="">
							</div>
						</a>
						<div class="words">
							爱到惊心动魄后

						</div>

					</li>
				</ul>
			</div>
		</div>
	</div>

	<!-- 音乐结束 -->

	<!-- 豆品开始 -->
	<div class="section">
		<div class="container doupin-area  clearfix">
			<div class="aside-left">
				<h2 class="title">
					<a href="">豆品</a>
				</h2>
			</div>
			<div class="aside-right">
				<div class="section-title">
					<h3 class="title">热门活动</h3>
					<div class="adv">
						<a href="">
							<img src="img/adv1.jpg" alt="">
						</a>
					</div>
					<div>
						<a href="">我的豆瓣收藏夹里有什么</a>
					</div>
				</div>
				<div class="section-title">
					<h3 class="title">官方小组</h3>
					<span class="link">
						<a href="">更多</a>
					</span>
				</div>
			</div>
			<div class="main">
				<div class="section-title">
					<h3 class="title">热卖商品 </h3>
					<span class="link">
						<a href="">更多</a>
					</span>
				</div>
				<ul class="item-list hot-music">
					<li>
						<div class="img ">
							<a href="">
								<img src="img/cover6.jpg" alt="">
							</a>
						</div>
						<div class="words">
							<a href="" class="left">豆瓣冻顶乌龙茶</a>
							<span>￥59</span>
						</div>

					</li>
					<li>
						<div class="img ">
							<a href="">
								<img src="img/cover6.jpg" alt="">
							</a>
						</div>
						<div class="words">
							<a href="" class="left">豆瓣冻顶乌龙茶</a>
							<span>￥59</span>
						</div>

					</li>
					<li>
						<div class="img ">
							<a href="">
								<img src="img/cover6.jpg" alt="">
							</a>
						</div>
						<div class="words">
							<a href="" class="left">豆瓣冻顶乌龙茶</a>
							<span>￥59</span>
						</div>

					</li>
					<li>
						<div class="img ">
							<a href="">
								<img src="img/cover6.jpg" alt="">
							</a>
						</div>
						<div class="words">
							<a href="" class="left">豆瓣冻顶乌龙茶</a>
							<span>￥59</span>
						</div>

					</li>
				</ul>
			</div>
		</div>

	</div>

	<!-- 豆品结束 -->

	<!-- 同城开始 -->
	<div class="section">
		<div class="container city-area  clearfix">
			<div class="aside-left">
				<h2 class="title">
					<a href="">同城</a>
				</h2>
				<nav class="left-menu">
					<ul>
						<li><a href="">近期活动</a></li>
						<li><a href="">主办方</a></li>
						<li><a href="">舞台剧</a></li>
					</ul>
				</nav>
			</div>
			<div class="aside-right">
				<div class="section-title">
					<h3 class="title">活动标签</h3>
				</div>
				<div class="group">
					<div class="group-name">
						<a href="">兴趣</a>
					</div>
					<div class="right-menu-list clearfix">
						<ul>
							<li><a href="">旅行</a></li>
							<li><a href="">摄影</a></li>
							<li><a href="">喜剧</a></li>
							<li><a href="">动画</a></li>
							<li><a href="">科幻</a></li>
						</ul>
					</div>
				</div>
				<div class="group">
					<div class="group-name">
						<a href="">兴趣</a>
					</div>
					<div class="right-menu-list clearfix">
						<ul>
							<li><a href="">旅行</a></li>
							<li><a href="">摄影</a></li>
							<li><a href="">喜剧</a></li>
							<li><a href="">动画</a></li>
							<li><a href="">科幻</a></li>
						</ul>
					</div>
				</div>
				<div class="group">
					<div class="group-name">
						<a href="">兴趣</a>
					</div>
					<div class="right-menu-list clearfix">
						<ul>
							<li><a href="">旅行</a></li>
							<li><a href="">摄影</a></li>
							<li><a href="">喜剧</a></li>
							<li><a href="">动画</a></li>
							<li><a href="">科幻</a></li>
						</ul>
					</div>
				</div>
				<div class="group">
					<div class="group-name">
						<a href="">兴趣</a>
					</div>
					<div class="right-menu-list clearfix">
						<ul>
							<li><a href="">旅行</a></li>
							<li><a href="">摄影</a></li>
							<li><a href="">喜剧</a></li>
							<li><a href="">动画</a></li>
							<li><a href="">科幻</a></li>
						</ul>
					</div>
				</div>
				<div class="group">
					<div class="group-name">
						<a href="">兴趣</a>
					</div>
					<div class="right-menu-list clearfix">
						<ul>
							<li><a href="">旅行</a></li>
							<li><a href="">摄影</a></li>
							<li><a href="">喜剧</a></li>
							<li><a href="">动画</a></li>
							<li><a href="">科幻</a></li>
						</ul>
					</div>
				</div>

			</div>
			<div class="main">
				<div class="section-title">
					<h3 class="title">呼和浩特 · 本周热门活动</h3>
					<span class="link">
						<a href="">更多</a>
					</span>
				</div>
				<ul class="item-list hot-music">
					<li class="clearfix">
						<div class="img left">
							<a href="">
								<img src="img/cover7.jpg" alt="">
							</a>
						</div>
						<div class="words ">
							<a href="">宫崎骏&久石让动漫作品音乐会 呼和浩特</a>
							<span>12月14日 周六 20:00 - 22:00</span>
							<span>内蒙古乌兰恰特 内蒙古呼和..</span>
							<span>4人关注</span>
						</div>
					</li>
					<li class="clearfix">
						<div class="img left">
							<a href="">
								<img src="img/cover7.jpg" alt="">
							</a>
						</div>
						<div class="words ">
							<a href="">宫崎骏&久石让动漫作品音乐会 呼和浩特</a>
							<span>12月14日 周六 20:00 - 22:00</span>
							<span>内蒙古乌兰恰特 内蒙古呼和..</span>
							<span>4人关注</span>
						</div>
					</li>
					<li class="clearfix">
						<div class="img left">
							<a href="">
								<img src="img/cover7.jpg" alt="">
							</a>
						</div>
						<div class="words ">
							<a href="">宫崎骏&久石让动漫作品音乐会 呼和浩特</a>
							<span>12月14日 周六 20:00 - 22:00</span>
							<span>内蒙古乌兰恰特 内蒙古呼和..</span>
							<span>4人关注</span>
						</div>
					</li>
					<li class="clearfix">
						<div class="img left">
							<a href="">
								<img src="img/cover7.jpg" alt="">
							</a>
						</div>
						<div class="words ">
							<a href="">宫崎骏&久石让动漫作品音乐会 呼和浩特</a>
							<span>12月14日 周六 20:00 - 22:00</span>
							<span>内蒙古乌兰恰特 内蒙古呼和..</span>
							<span>4人关注</span>
						</div>
					</li>

				</ul>
			</div>
		</div>
	</div>
	<!-- 同城结束 -->

	<!--主区域结束  -->

	<footer class="footer">
		<div class="container doupin-area  clearfix">
			<div class="left">
				<p>
					© 2005－2020 douban.com, all rights reserved 北京豆网科技有限公司
				</p>
				<p>
					<a href="">京ICP证090015号 </a>京ICP备11027288号 网络视听许可证<a href="">0110418</a>号
				</p>
				<p>
					京网文[2015]2026-368号 <img  src="img/biaoshi.gif" alt=""> <a href="">京公网安备11010502000728</a>  新出网证(京)字129号
				</p>
				<p>违法和不良信息举报电话：4008353331-9 </p>
				<p>
					<img src="img/jubao.png" alt="">
					<a href="">中国互联网举报中心</a> 电话：12377 <a href="">新出发京批字第直160029号</a>
				</p>
			</div>
			<div class="right">
				<nav class="menu">
					<a href="">关于豆瓣</a>
					·
					<a href="">在豆瓣工作 </a>
					·
					<a href="">联系我们 </a>
					·
					<a href=""> 法律声明 </a>
					·
					<a href="">帮助中心 </a>
					·
					<a href="">移动应用</a>
					·
					<a href=""> 豆瓣广告</a>
				</nav>
				<div class="adv">
					<a href="">
						<img src="img/adv2.jpg" alt="">
					</a>
				</div>
			</div>
		</div>
	</footer>
</body>

</html>